<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="never">
<title>小爱音色列表</title>
<style>
h3{
text-align:center;
color:#fd7299;
}
.div_list{
	border-radius:15px;
}
.more{
	background-color: rgba(0, 0, 0, 0.5);
	color: #66ccff;
	text-align: center;
	display: block;
	margin: 5px auto;
	font-size: 16px;
	padding: 15px 100px;
	border-radius:15px;
}
.more:active{
	background-color: rgba(0, 0, 0, 0.6);
}
.span{
	color: #66ccff;
	text-align: center;
	display: block;
	margin: 10 auto;
	font-size: 16px;
	padding: 15px 100px;
	border-radius:15px;
}
.table{
	border-radius:15px;
	background-color: rgba(0, 0, 0, 0.5);
}
.span:hover{
	background-color: rgba(0, 0, 0, 0.6);
}
.btn {
background-color: #66ccff;
border-radius:15px;
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
padding: 10px 100px;
text-align: center;
text-decoration: none;
font-size: 16px;
display: block;
margin: 15 auto;
border-radius:15px;
}
.btn:hover {
background-size: 100% 100%;
color: #fff;
}
</style>
</head>
<body style=' background:url("https://land.xiaomi.net/mcfe/ai-personal-tts-share-fe/static/media/bg.cdfc1b2a.png") no-repeat center top;background-size:cover;background-repeat:no-repeat;background-attachment: fixed;'>
<h3>加载中</h3>
<div id='div_list' class='div_list' style="WIDTH: 100%;  HEIGHT: 100px; overflow-x:hidden; overflow-y:auto">
<table class='table' width="100%" border="0" cellspacing="0" cellpadding="0;" id='lists'>   
</table>
</div>
<div style='position: fixed; bottom: 10px;'><a style='color:#fd7299;' href='https://jq.qq.com/?_wv=1027&k=5R7auqc'>小爱音色分享群：631954691</a></div>
<div style='position: fixed; bottom: 10px; right: 10px;'><a style='color:#fd7299;' href='./add'>添加分享音色</a></div>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278801815'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1278801815' type='text/javascript'%3E%3C/script%3E"));</script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>$('#cnzz_stat_icon_1278801815 a')[0].style.display = 'none';$('#cnzz_stat_icon_1278801815 a')[0].style.color = '#fd7299';</script>
<script>
var h3 = document.getElementsByTagName('h3')[0];
var lists = $('#lists')[0];
var list;
var i = 0;
var json;
var more = $('<div class="more">载入更多</div>');
var page = 1;
window.onload = function(){
	update_height();
	load();
}
window.onresize = function(){
	update_height();
}
window.addEventListener("orientationchange", function() {
	setTimeout(function(){
	update_height();
	}, 666);
}, false);
function update_height(){
var div_list = $('#div_list')[0];
div_list.style.height = document.body.clientHeight - 110;
}

function load(){
	more.text('加载中...');
	$.getJSON('//cf.wxfsq.com/xa/list_new.php',
	{type:'share_list',page:page},
	function(data){
		data.data.forEach(function(data){
			var color = data.gendor.indexOf('female') == -1 ? '#66ccff' : '#fd7299';
			var id = data.id;
			var name = data.name;
			var i = data.index;
            var imgurl = data.imgurl;
			list = document.createElement('tr');
			var span = document.createElement('span');
			span.innerHTML = i + '.' + name;
			span.className = "span";
			list.setAttribute("style", "color:" + color);
			span.setAttribute("style", "color:" + color);
			list.appendChild(span);
			json = {name:name,id:id,gendor:data.gendor,color:color,index:i,imgurl:data.imgurl};
			list.json = JSON.stringify(json);
			list.onclick = function(){
				down(this.json);
			};
			lists.appendChild(list);
			i--;
		});
		if(page == 1){
			more[0].onclick = function(){
				load();
			}
			div_list.appendChild(more[0]);
			h3.innerHTML = data.title + '[' + data.num + ']';
			document.title = data.title;
		}
		if(data.pagenum > page){
			more.text('载入更多');
		}else{
			more.hide();
		}
		page++;
	});
}

function down(json){
    localStorage.setItem('text',encodeURIComponent(json));
    window.open('./down');
        //window.open('./down/?text=' + encodeURIComponent(json));
	//location.href = 'down.html?text=' + encodeURIComponent(json);
	return '';
}
</script>
</body>
</html>